.docs-wrapper:root,
.blog-wrapper:root {
    --primary-font-sans: "Inter";
}

/* Firefox */
.scrollbar-slim {
    scrollbar-width: thin;
    scrollbar-color: red blue;
}

/* Chrome, Edge, and Safari */
.scrollbar-slim::-webkit-scrollbar {
    width: 12px;
}

.scrollbar-slim::-webkit-scrollbar-track {
    background: #14141f;
    border-radius: 5px;
}

.scrollbar-slim::-webkit-scrollbar-thumb {
    background-color: #303450;
    border-radius: 12px;
    border: 3px solid #14141f;
}

.refine-prose {
    max-width: 100% !important;
    @apply prose prose-invert font-normal;
    @apply 2xl:prose-base;
    @apply prose-strong:dark:text-gray-100 prose-strong:text-gray-800;
    @apply prose-a:text-refine-react-light-link prose-a:dark:text-refine-react-dark-link  prose-a:font-normal prose-a:no-underline;

    @apply prose-h1:font-semibold;
    @apply prose-h1:text-gray-800 prose-h1:dark:text-gray-100;
    @apply prose-h1:text-[1.25rem] prose-h1:leading-[1.75rem];
    @apply sm:prose-h1:text-[2rem] sm:prose-h1:leading-[2.5rem];
    @apply prose-h1:mb-4 sm:prose-h1:mb-8;

    @apply prose-h2:font-semibold;
    @apply prose-h2:text-gray-800 prose-h2:dark:text-gray-100;
    @apply prose-h2:text-[1rem] prose-h2:leading-[1.5rem];
    @apply sm:prose-h2:text-[1.5rem] sm:prose-h2:leading-[2rem];
    @apply prose-h2:mb-4 sm:prose-h2:mb-6;

    @apply prose-h3:font-semibold;
    @apply prose-h3:text-gray-800 prose-h3:dark:text-gray-100;
    @apply prose-h3:text-[0.875rem] prose-h3:leading-[2.5rem];
    @apply sm:prose-h3:text-[1.25rem] sm:prose-h3:leading-[1.75rem];
    @apply prose-h3:mb-4 sm:prose-h3:mb-6;

    @apply prose-h4:font-semibold;
    @apply prose-h4:text-gray-800 prose-h4:dark:text-gray-100;
    @apply prose-h4:text-base;
    @apply prose-h4:mb-4 sm:prose-h4:mb-6;

    @apply prose-p:dark:text-gray-100 prose-p:text-gray-800 prose-p:mb-5 prose-p:mt-0;
    @apply prose-p:text-base sm:prose-p:leading-7;

    @apply prose-li:text-sm sm:prose-li:text-base;
    @apply prose-li:my-0 2xl:prose-li:text-base;
    @apply prose-li:pl-0;
    @apply prose-ul:pl-[18px] prose-ul:ml-0 prose-ul:dark:text-gray-100 prose-ul:text-gray-800;
    @apply prose-ol:pl-[18px] prose-ol:ml-0 prose-ol:dark:text-gray-100 prose-ol:text-gray-800;

    @apply prose-pre:font-jetBrains-mono;

    @apply prose-blockquote:border-l-4 prose-blockquote:rounded-lg prose-blockquote:py-4 prose-blockquote:pr-4 prose-blockquote:pl-3 prose-blockquote:font-normal prose-blockquote:not-italic;
    @apply prose-blockquote:bg-gray-100 prose-blockquote:text-gray-800 prose-blockquote:border-l-gray-400;
    @apply prose-blockquote:dark:bg-gray-700 prose-blockquote:dark:text-gray-100 prose-blockquote:dark:border-l-gray-500;

    @apply prose-code:text-base 2xl:prose-code:text-base;
    /* @apply prose-code:translate-y-0.5; */
    @apply prose-code:inline-block;
    @apply prose-code:text-gray-700 prose-code:bg-gray-400 prose-code:bg-opacity-10;
    @apply prose-code:dark:text-gray-0 prose-code:dark:bg-gray-400 prose-code:dark:bg-opacity-10;
    @apply prose-code:px-1 prose-code:py-0 prose-code:rounded prose-code:font-jetBrains-mono prose-code:before:content-none prose-code:after:content-none;
    @apply prose-code:font-normal;
    @apply prose-code:decoration-clone;
    @apply prose-code:border-none;

    @apply max-w-none;
}

.refine-prose li code {
    @apply align-baseline;
}

.refine-prose table code {
    @apply !align-baseline;
}

.refine-prose li::marker {
    @apply text-gray-500;
}

.refine-prose ul li::marker {
    @apply text-xl leading-7;
}

/* .refine-prose *:last-child:not(header h1) {
    margin-bottom: 0;
} */

.refine-prose h1 code,
.refine-prose h2 code,
.refine-prose h3 code,
.refine-prose h4 code {
    font-size: inherit;
    line-height: inherit;
    vertical-align: bottom;
    transform: translateY(0);
}

.refine-prose h4 code {
    text-transform: none;
    letter-spacing: normal;
}

.refine-prose a.hash-link {
    position: relative;
    width: 0;
    padding: 0;
    display: inline-flex;
    margin-left: 6px;
}

.refine-prose a.hash-link::before {
    content: "";
    background-size: 12px 12px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="%23667084" fill-rule="evenodd" d="M9.172 1.172a4 4 0 1 1 5.656 5.656l-2 2a.5.5 0 1 1-.707-.707l2-2A3 3 0 1 0 9.88 1.88l-2 2a.5.5 0 0 1-.707-.707l2-2Zm2.182 3.474a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708l6-6a.5.5 0 0 1 .708 0ZM3.879 7.172a.5.5 0 0 1 0 .707l-2 2A3 3 0 1 0 6.12 14.12l2-2a.5.5 0 0 1 .707.707l-2 2a4 4 0 0 1-5.656-5.656l2-2a.5.5 0 0 1 .707 0Z" clip-rule="evenodd"/></svg>');
    @apply bg-gray-400 bg-opacity-10;
    @apply leading-7;
    @apply absolute;
    @apply w-7 h-7 inline-flex rounded-[10px];
    @apply bg-center bg-no-repeat bg-[size:0.875rem];
    @apply top-1/2 -translate-y-1/2;
    @apply transition-all duration-200 ease-in-out;
    @apply -left-px;
}

.refine-prose a.hash-link:hover::before {
    @apply bg-[size:1rem];
}

html[data-theme="dark"] .refine-prose a.hash-link::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="%2399A1B3" fill-rule="evenodd" d="M9.172 1.172a4 4 0 1 1 5.656 5.656l-2 2a.5.5 0 1 1-.707-.707l2-2A3 3 0 1 0 9.88 1.88l-2 2a.5.5 0 0 1-.707-.707l2-2Zm2.182 3.474a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708l6-6a.5.5 0 0 1 .708 0ZM3.879 7.172a.5.5 0 0 1 0 .707l-2 2A3 3 0 1 0 6.12 14.12l2-2a.5.5 0 0 1 .707.707l-2 2a4 4 0 0 1-5.656-5.656l2-2a.5.5 0 0 1 .707 0Z" clip-rule="evenodd"/></svg>');
}

.refine-prose blockquote,
.refine-prose blockquote p {
    @apply before:content-none after:content-none;
}

.refine-prose table {
    @apply prose-table:border-none;
}

.refine-prose table tr {
    border-top: unset;
}

.refine-prose table th,
.refine-prose table td {
    @apply border border-gray-300 px-2 py-2 text-gray-800 dark:border-gray-600 dark:text-gray-100;
    @apply text-base leading-6;
    @apply align-top;
}

.refine-prose table th {
    @apply font-semibold;
    @apply text-gray-800 dark:text-gray-100;
    @apply text-base leading-7;
}

.refine-prose table th code {
    @apply text-base;
}

.refine-prose table tbody tr:nth-child(odd) {
    @apply bg-gray-400 bg-opacity-10;
}

.refine-prose table tbody tr:nth-child(even) {
    @apply bg-gray-0 dark:bg-gray-800;
}

.refine-prose table thead {
    @apply bg-gray-0 dark:bg-gray-800;
}

.refine-prose table thead tr {
    @apply border-none;
}

.refine-prose .table-container {
    @apply overflow-auto max-w-full mt-8 mb-4 pb-4;
}

.refine-prose .table-container table {
    @apply my-0 table table-auto;
}

.refine-toc-item {
    @apply cursor-pointer;
}

.refine-toc-item code::before,
.refine-toc-item code::after {
    content: "";
}

.refine-toc-item code {
    @apply rounded !border-none py-0.5 px-1 !align-bottom font-jetBrains-mono !text-inherit dark:bg-gray-600 dark:bg-opacity-30 dark:!text-inherit;
    font-size: 12px;
}

a:has(> code) {
    text-decoration: none !important;
}

a:has(> code) code {
    @apply !text-refine-react-light-link dark:!text-refine-react-dark-link !align-baseline;
}

p:has(> code) code {
    @apply mx-0.5 !align-baseline;
}

li a:has(> code) code {
    @apply !mx-0 !align-baseline;
}

/* admonition overrides */

.admonition.admonition-caution code:not(pre>code) {
    @apply dark:bg-refine-react-dark-orange dark:bg-opacity-[0.15] bg-refine-react-dark-orange bg-opacity-[15%];
}

.admonition.admonition-caution li::marker {
    @apply dark:text-refine-react-dark-orange text-refine-react-light-orange text-xl leading-7;
}

.admonition.admonition-danger code:not(pre>code) {
    @apply dark:bg-refine-red dark:bg-opacity-[0.15] bg-refine-red bg-opacity-[15%];
}

.admonition.admonition-danger li::marker {
    @apply dark:text-refine-red text-refine-red text-xl leading-7;
}

.admonition.admonition-info code:not(pre>code) {
    @apply dark:bg-refine-react-dark-purple dark:bg-opacity-[0.15] bg-refine-react-light-purple bg-opacity-[15%];
}

.admonition.admonition-info li::marker {
    @apply dark:text-refine-react-dark-purple text-refine-react-light-purple text-xl leading-7;
}

.admonition.admonition-tip code:not(pre>code) {
    @apply dark:bg-refine-react-dark-green-alt dark:bg-opacity-[0.15] bg-refine-react-light-green-alt bg-opacity-[15%];
}

.admonition.admonition-tip li::marker {
    @apply dark:text-refine-react-dark-green-alt text-refine-react-light-green-alt text-xl leading-7;
}

.admonition.admonition-note code:not(pre>code) {
    @apply dark:bg-refine-react-dark-green dark:bg-opacity-[0.15] bg-refine-react-light-green bg-opacity-[15%];
}

.admonition.admonition-note li::marker {
    @apply dark:text-refine-react-dark-green text-refine-react-light-green text-xl leading-7;
}

.admonition pre.prism-code code {
    @apply bg-transparent;
}

.refine-prose blockquote li::marker {
    @apply dark:text-gray-500 text-gray-400 text-xl leading-7;
}

.refine-prose blockquote code:not(pre>code) {
    @apply dark:bg-gray-500 dark:bg-opacity-[0.10] bg-gray-400 bg-opacity-[15%];
}

.refine-prose blockquote .refine-common-code-block {
    @apply mx-0;
}

/*  */

.refine-details > summary + div > div {
    @apply mt-0 border-t-0 pt-0;
}

.refine-details-content {
    @apply p-4;
}

.refine-details .refine-details-content > div > *:last-child {
    @apply !mb-0;
}

.refine-details > summary .refine-details-triangle {
    @apply transition-transform duration-200 ease-in-out;
    @apply -rotate-90;
}

.refine-details[open] > summary .refine-details-triangle {
    @apply rotate-0;
}

.max-w-screen-content {
    @apply max-w-screen-content-sm md:max-w-screen-content-md content-xl-safe:max-w-screen-content-xl 2xl:max-w-screen-content-2xl;
}

html .no-underline {
    text-decoration: none;
}

html[data-active-page="index"],
html[data-active-page="index"] body {
    @apply bg-gray-800;
}

@keyframes element-animation {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.landing-hero-mobile-svg .auth,
.landing-hero-mobile-svg .backend,
.landing-hero-mobile-svg .framework,
.landing-hero-mobile-svg .platform {
    opacity: 0;
    animation: element-animation 24s infinite;
    will-change: opacity;
}

.landing-hero-mobile-svg .nextjs {
    animation-delay: 0s;
}

.landing-hero-mobile-svg .vite {
    animation-delay: 8s;
}

.landing-hero-mobile-svg .remix {
    animation-delay: 16s;
}

.landing-hero-mobile-svg .mui {
    animation-delay: -3s;
}

.landing-hero-mobile-svg .antd {
    animation-delay: 5s;
}

.landing-hero-mobile-svg .chakra {
    animation-delay: 13s;
}

.landing-hero-mobile-svg .supabase {
    animation-delay: -6s;
}

.landing-hero-mobile-svg .nest {
    animation-delay: 2s;
}

.landing-hero-mobile-svg .appwrite {
    animation-delay: 10s;
}

.landing-hero-mobile-svg .google {
    animation-delay: -9s;
}

.landing-hero-mobile-svg .auth0 {
    animation-delay: -1s;
}

.landing-hero-mobile-svg .strapi {
    animation-delay: 7s;
}

.animation-parent {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000;
}

.sp-preview .sp-loading {
    display: none;
}

.sp-preview .sp-custom-loading {
    display: none;
}

.sp-preview .sp-loading + .sp-custom-loading {
    @apply bg-gray-0 dark:bg-gray-800;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    /* background: white; */
    z-index: calc(var(--sp-zIndices-top) + 1);
    justify-content: center;
    align-items: center;
    pointer-events: none;
    flex-direction: column;
    gap: 12px;
}

.sp-preview .sp-loading + .sp-custom-loading .sp-loading-progress {
    @apply animate-progress-fill;
}

.sp-icon-standalone[title="Open in CodeSandbox"] svg + span {
    display: none;
}
button.sp-button.sp-icon-standalone[title="Open in CodeSandbox"]:has(svg + span) {
    padding-left: 0px;
    padding-right: 4px;
    width: 26px;
}

.refine-tab-content > *:last-child {
    @apply mb-0;
}

.admonition-simple ul {
    margin: 0;
    list-style-position: outside;
    padding-left: 24px;
    list-style-type: "-   ";  
}

.admonition .refine-common-code-block {
    margin-left: 0;
    margin-right: 0;
}

.admonition-simple * {
    @apply text-sm leading-4 sm:leading-5;
}

.admonition-simple .admonition-content *:last-child {
    @apply mb-0;
}

.admonition-simple .admonition-content ul li::marker {
    @apply text-gray-700 dark:text-gray-100;
}

.admonition .admonition-header code {
    text-transform: none;
}

h4 > del:has(code:only-child) {
    @apply no-underline;
}

h4 > del:has(code:only-child) code {
    @apply line-through;
}

.theme-code-block-highlighted-line {
    @apply !bg-refine-react-light-link !bg-opacity-[0.07] dark:!bg-refine-react-dark-link dark:!bg-opacity-[0.05];
    @apply relative;
}

.theme-code-block-highlighted-line::after,
.theme-code-block-highlighted-line::before {
    content: "";
    @apply block absolute top-0;
    @apply w-0.5 h-full;
    @apply bg-refine-react-light-link bg-opacity-75 dark:!bg-refine-react-dark-link dark:bg-opacity-50;
}

.theme-code-block-highlighted-line::after {
    @apply left-0;
}

.theme-code-block-highlighted-line::before {
    @apply right-0;
}

.refine-prose .refine-wider-container {
    @apply widening-start:-mx-4;
}

.refine-prose .refine-wider-container .refine-wider-container {
    @apply mx-0;
}

.refine-prose .table-full-width .table-container,
.refine-prose .table-full-width .props-table {
    /* --preferred-full-table-width */
    --full-width-limit: 1280px;
    --applied-full-table-width: min(var(--preferred-full-table-width, 100%), var(--full-width-limit));
    max-width: var(--applied-full-table-width);
    margin-left: calc((-1 * ((var(--applied-full-table-width, 100%) - 100%) / 2)) + 16px);
    margin-right: calc((-1 * ((var(--applied-full-table-width, 100%) - 100%) / 2)) + 16px);
}

.refine-prose code,
.font-mono,
.font-jetBrains-mono {
    font-variant-ligatures: none !important;
    font-feature-settings: "liga" 0;
}

h1 del,
h2 del,
h3 del,
h4 del,
h1 del code,
h2 del code,
h3 del code,
h4 del code {
    @apply !line-through;
    @apply !text-gray-400 dark:!text-gray-500;
}

.docs-wrapper *::selection {
    @apply bg-refine-selection text-gray-800;
}

.sp-bridge-frame {
    display: none !important;
}

.sp-console-list code {
    @apply !bg-none !bg-transparent !border-none;
}
.sp-console-list .sp-console-item {
    @apply !px-2 !py-px text-gray-600 dark:text-gray-200;
}

.cm-gutter.cm-lineNumbers {
    @apply !text-xs !leading-5;
}